<template>
	<view class="pj">
		<uni-card >
			<view class="pingjia">
				请评价一下吧
			</view>
			<view class="status">
				<view class="" v-for="(item,index) in data" :key="index">
					<image :src="item.isimg == false ? item.chaping2 : item.chaping"
						style="width: 100rpx;height: 100rpx;" @click="pjimg(index,item.id)"></image>
					<view class="pj_ft">
						{{item.title}}
					</view>
				</view>
			</view>
			<view class="second">
				<view class="vo_btn" v-for="(item,index) in list" :key="index" @click="VoBtn(index,item.itemText)"
					:style="{border: '1px solid ' + item.bordercolor,background:item.bgcolor}">
					{{item.itemText}}
				</view>
			</view>
		</uni-card>
		<uni-card>
			<view class="buchong">
				补充评价
			</view>
			<view class="txt">
				<view class="txt_ft">
					<textarea name="" id="" cols="30" rows="10" maxlength='140' placeholder="补充说点别的" v-model="num" class="textare"></textarea>
					<view class="count">
						{{num.length}}/140
					</view>
				</view>
				
			</view>
		</uni-card>
		<view class="footer">
			<button class="ft_btn" @tap="evBtn">发表评价</button>
		</view>
		
	</view>
</template>

<script>
	import {
		busExpertAppraiseadd,vocabularyList
	} from '@/utils/OnetoOneaApi.js'
	import {
		imgBaseUrl
	} from '@/utils/baseUrl.js'
	export default {
		data() {
			return {
				num:'',
				data: [{
					id: '1',
					chaping: imgBaseUrl + '/img/wshing/chaping.png',
					chaping2: imgBaseUrl + '/img/wshing/chaping2.png',
					title: '差评',
					isimg: false
				}, {
					id: '3',
					chaping: imgBaseUrl + '/img/wshing/zhongping.png',
					chaping2: imgBaseUrl + '/img/wshing/zhongping2.png',
					title: '中评',
					isimg: false
				}, {
					id: '5',
					chaping: imgBaseUrl + '/img/wshing/haoping.png',
					chaping2: imgBaseUrl + '/img/wshing/haoping2.png',
					title: '好评',
					isimg: false
				}],
				list: [],
				grade:'',
				vocabulary:''
			}
		},
	 async	mounted(){
		 const res = await vocabularyList()
		 console.log(res,'res');
	    let  arr = res.result.records.map((item)=>{
			item['isvoc'] = false
			item['bgcolor'] = ''
			item['bordercolor'] = '#EBEBEB'
			return item
		})
		console.log(arr,'arr');
		this.list = arr
		},
		methods: {
			pjimg(index, id) {
				this.grade = id
				console.log(id,'id');
				for (let i = 0; i < this.data.length; i++) {

					if (i == index) {
						this.data[i].isimg = true
					} else {
						this.data[i].isimg = false
					}
				}
			},
			VoBtn(index, name) {
				console.log(name,'name')
				this.vocabulary = name
				for (let i = 0; i < this.list.length; i++) {
					if (i == index) {
						this.list[i].isvoc = true
						this.list[i].bordercolor = '#FF7F22'
						this.list[i].bgcolor = '#FFF5ED'
					} else {
						this.list[i].isvoc = false
						this.list[i].bordercolor = '#EBEBEB'
						this.list[i].bgcolor = '#F7F7F7'
					}
				}
			},
			//发表评价
		 async evBtn(){
				const params = {
					userId:'4028d0818b130301018b130301140000',
					grade:this.grade,
					vocabulary:this.vocabulary,
					supplement:this.num
				}
				console.log(params);
				const  res = await busExpertAppraiseadd(params)
				if(red.code == 200)
				{
					this.grade = ''
					this.vocabulary = ''
					this.num = ''
				}
			}
		}
	}
</script>

<style scoped lang="less">
	.pj {
		width: 100%;
		// height: 100vh;
		background-color: #F5F5F7;

		.pingjia {
			font-size: 36rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #333333;
		}

		.status {
			display: flex;
			justify-content: space-between;
			padding: 55rpx 20rpx 37rpx 20rpx;

			.pj_ft {
				text-align: center;
				font-size: 26rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #333333;
			}
		}

		.second {
			display: flex;
			justify-content: space-around;
			flex-wrap: wrap;
			align-items: center;
			padding-bottom: 33rpx;

			.vo_btn {
				// width: 158rpx;
				// height: 72rpx;
				background: #F7F7F7;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				opacity: 1;
				text-align: center;
				line-height: 72rpx;
				padding: 10rpx 31rpx 10rpx 42rpx;
				margin-top: 26rpx;
				letter-spacing: 2rpx;
			}
		}
		.buchong{
			font-size: 36rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 500;
			color: #333333;
			
		}
		.txt{
			// height: 386rpx;
			.txt_ft{
				// position: absolute;
				.textare {
					margin-top: 36rpx;
					background-color: #F5F5F7;
					width: 100%;
					// padding: 30rpx 74rpx 30rpx 30rpx;
					border-radius: 16rpx 16rpx 16rpx 16rpx;
				}
				.count{
					position: relative;
					    bottom: 66rpx;
						left: 514rpx;
				}
			}
			
		}
		.footer{
			    padding: 24rpx 28rpx 20rpx 28rpx;
			.ft_btn{
				background: #FF7F22;
				font-size: 32rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				color: #FFFFFF;
			}
		}

	}
</style>